<template>
    <!-- 上传 -->
    <div id="upload" class="app-container">
        <header id="header">
            <h1>上传Excel数据源</h1>
        </header>

        <main id="main">
            <div class="upload-list">
                <div class="upload-txt-parents">
                    <div class="upload-txt" v-if="fileList.length" >
                        <div class="upload-type">
                            excel
                        </div>
                        <div class="upload-content">
                            <p class="file-name">
                                <a-upload :file-list="fileList" :remove="handleRemove">
                                </a-upload>
                            </p>
                            <p class="base-english">{{modal.fileEnglishName}}</p>
                        </div>
                    </div>
                </div>
                <div>
                    <a-button type="primary" @click="upLoadBtn">上传</a-button>
                    <a-button type="primary" @click="getDataView">重新解析</a-button>
                    <a-button type="primary" @click="dowloadExcelModelHandle">下载EXCEL模板</a-button>
                    <a-button type="primary" @click="$router.push({path:'/dataAnalysis/DataSource'})">返回</a-button>
                </div>
            </div>
            <div class="upload-sucess-tip">
                <div v-if="successData">
                    <p>上传成功</p>
                    <p>共{{successData.fieldTotal}}个字段</p>
                    <p>共上传{{successData.rows}}行数据</p>
                </div>
            </div>
            <a-table
                :columns="columns"
                bordered
                :rowKey="
                    (record, index) => {
                        return index;
                    }
                "
                :data-source="dataView"
                size="small"
            >
            </a-table>
        </main>

        <footer id="footer">
            <a-config-provider :locale="zh_CN">
             <!-- v-if="total>0" -->
                <a-pagination
                    v-if="total>0"
                    show-size-changer
                    :default-current="3"
                    :total="100"
                    show-quick-jumper
                    @change="onVisibleChange"
                    @showSizeChange="onVisibleShowSizeChange"
                    :show-total="total => `总数据 ${total} 条`"
                />
            </a-config-provider>
        </footer>

        <a-modal
            title="上传Excel"
            :visible="visible"
            :destroyOnClose="true"
            @ok="handleOk"
            @cancel="handleCancel"
            id="modal"
            width="400px"
            ok-text="确认"
            cancel-text="取消"
            dialogClass="uploadExcelModal"
        >
            <!--<a-input placeholder="Excel文件名称" v-model="modal.fileName" />-->
            <a-form v-bind="modal" :form="form" :label-col="{ span: 5 }" :wrapper-col="{ span: 19 }">
                <a-form-item label="英文名称：">
                    <a-input placeholder="Excel英文名称" class="upload-modal-input"
                    v-decorator="[
                        'fileEnglishName',
                        { rules: [
                            {   required: true,
                                message: '请输入表英文名称',
                            },
                            { pattern:new RegExp('^[a-zA-Z][0-9a-zA-Z_]{0,9}\w*$','g'),message:'只能输入英文名称，不能以数字或下划线开头'}
                        ] },
                    ]"
                    />
                </a-form-item>
                <a-form-item label="文件：" v-show="fileList.length>0">
                    <a-upload :file-list="fileList" :remove="handleRemove">
                    </a-upload>
                </a-form-item>
                <a-upload
                    :multiple="false"
                    :file-list="fileList"
                    :showUploadList='false'
                    :customRequest="customRequest"
                    accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel">
                    <a-button> <a-icon type="upload" /> 上传Excel </a-button>
                </a-upload>
            </a-form>
        </a-modal>
    </div>
</template>

<script>
import zh_CN from "ant-design-vue/lib/locale-provider/zh_CN";
import {
	importExcelData,dowloadExcelModel
} from "@/api/dataAnalysis/dataSource";
import {
    getDateViewList,
} from "@/api/dataManagement/system/info";
export default {
    data() {
        return {
            zh_CN,
            header: {
                fileName: "", //文件名称
                fileEnglishName: "" //文件英文名称
            },
            modal: {
                fileName: "", //文件名称
                fileEnglishName: "" //文件英文名称
            },
            form:this.$form.createForm(this,{}),
            fileList: [],
            visible: false,
            successData:"",
            total:0,
            parmas:{
                pageNum:1,
                pageSize:10,
            },
            columns: [],
            dataView:[]
        };
    },
    mounted(){
    },
    methods: {
        //跳转到某一页
        onVisibleChange(item) {
            this.$set(this.parmas,'pageNum',item)
            this.getDataView()
        },

        //改变条数
        onVisibleShowSizeChange(current, pageSize) {
            this.parmas = {
                pageNum:current,
                pageSize:pageSize,
            }
            this.getDataView()
        },

        //上传弹窗打开
        upLoadBtn() {
            this.fileList = [];
            this.modal.fileName = '';
            this.modal.fileEnglishName = '';
            this.visible = true;
        },

        //上传弹窗确定
        handleOk() {
            // this.modal.v
            this.form.validateFields((error, values) => {
                this.modal.fileEnglishName=  values.fileEnglishName
                if(error) {
                    return false;
                }
                if(!this.fileList.length) {
                    this.$message({
                        message: 'excel不能为空',
                        type: 'warning'
                    })
                    return false;
                }
                let formData = new FormData();
                formData.append('file', this.fileList[0]);
                formData.append('tableName',values.fileEnglishName)
                console.log(this.fileList[0])
                importExcelData(formData).then(res=>{
                    this.visible = false;
                    this.successData = res.data
                    this.getDataView()
                })
                this.visible = false;
            });
        },

        //上传弹窗关闭
        handleCancel() {
            this.visible = false;
        },

        //上传
        customRequest(info){
            console.log(info)
            this.fileList = []
            this.modal.fileName = ''
            this.modal.fileName = info.file.name;
            this.fileList.push(info.file);
        },

        //删除文件
        handleRemove(info){
            const index = this.fileList.indexOf(info);
            const newFileList = this.fileList.slice();
            newFileList.splice(index, 1);
            this.fileList = newFileList;
            this.modal.fileName = '';
            this.modal.fileEnglishName = '';
        },
        getDataView(){
            if(this.successData.tableId && this.modal.fileEnglishName) {
                getDateViewList({tableId:this.successData.tableId,...this.parmas}).then(res=>{
                    this.columns = []
                    this.dataView = res.data.list;
                    this.total =  res.total
                    let objData = res.data.header;
                    if(objData.length>0) {
                        for(var i=0;i<objData.length;i++){
                            var heanderData = {
                                title: objData[i].filedAlias,
                                dataIndex: objData[i].filedAlias,
                                key: objData[i].filedAlias,
                                align: "center",
                                children:[
                                    {
                                        title: objData[i].filedName,
                                        dataIndex: objData[i].filedName,
                                        key: objData[i].filedName,
                                        align: "center",
                                    }
                                ]
                            }
                            this.columns.push(heanderData);
                        }
                    }
                })
            } else {
                this.$message.warning('暂无数据表解析')
            }
        },
        // 下载excel 模板
        dowloadExcelModelHandle(){
            // {sourcePath:"ARROGANCY/20210826135721-excel-template.xls"}
            dowloadExcelModel().then(res=>{
                window.open(res.data.absolutePath)
            })
        },
        watchfileEnglishNameHandle(e){
            console.log( this.modal.fileEnglishName)
            // this.form.fileEnglishName = this.form.fileEnglishName.replace('^[a-zA-Z]{1}\w*$','')
        }
    }
};
</script>

<style lang="scss" scoped>
p{
    margin:0;
    padding:0;
}
#upload {
    background: white;
    box-sizing: border-box;
    padding: 1rem;
    #header {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        .ant-input {
            width: 13rem;
            margin-right: 1rem;
        }
        .ant-btn {
            margin-right: 1rem;
        }
        h1{
            margin-bottom:0;
        }
    }
    #main {
        margin-top: 1rem;
        .upload-list{
            display: flex;
            // align-items: center;
            flex-wrap: wrap;
            justify-content: space-between;
            .ant-btn{
                margin-right:10px;
            }
            .upload-txt{
                display: flex;
                align-items:center;
                border:1px solid #dddd;
                .upload-type{
                    border-right:1px solid #ddd;
                    padding:10px;
                    line-height: 43px;
                }
                .file-name{
                    border-bottom:1px solid #ddd;
                    cursor: pointer;
                    &:hover{
                        color:red;
                    }
                    ::v-deep .ant-upload-list-item{
                        margin: 0;
                    }
                    ::v-deep .ant-upload-list-item-info{
                      padding:0 30px 0 4px;
                    }
                }
                p{
                    padding: 5px 8px;
                }
            }
        }
        .upload-sucess-tip{
            border:1px solid #ddd;
            height:70px;
            margin:10px 0;
            p{
                padding-left:10px;
            }
        }
    }
    #footer {
        display: flex;
        justify-content: flex-end;
        margin-top: 1rem;
    }
}
</style>

<style lang="scss">
#modal {
    .ant-input {
        margin-right: 1rem;
    }
}
.uploadExcelModal{
    .ant-form-item{
        margin-bottom:10px;
    }
}
</style>
